<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Insert title here</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/plugins/font-awesome/css/font-awesome.css"> 
  <style type="text/css">
  
	  body,ul,li{
	     list-style: none;
	     padding:0;
	     margin:0;
	  }
      body{
         background-color:#fff;
      }
      .col{
         padding-left:4px;
         padding-right:4px;
      }

      .top-title{         
         height:50px;
         line-height:50px;
         background-color:#429BFE;
         color:#fff;
         font-size:18px;
         text-align: center;
         margin-bottom:12px;
         position: relative;
      }
    .top-reback{
       float:right;
       font-size:14px;
       padding:0 10px;
       cursor:pointer;
       position: absolute;
       top:0;
       right:0;
       font-size:12px;
    }      
      
      .back-home{
         height:50px;
         float:right;
         line-height:50px;
      }
      .back-home>a{
          height:50px;
          line-height:50px;
          padding:0 30px;
          font-size:12px;
          cursor:pointer;
          color:#fff;
      }
      
      .top-condition{
          padding:20px;
          background-color:#fff;
      }   
      .condition-Item{
         position:relative;;
      }
      
      .condition-Item + .condition-Item{
         margin-top:5px;
      }
      
      .condition-Item-lable{
         position:absolute;
         left:0;
         top:0;
         width:60px;
         font-size:12px;
         font-weight:600;	
         padding:5px 0;
      }    
      
      .condition-Item-content{
         margin-left:60px;
      }
      .condition-Item-content .item{
         padding:5px 10px;
         float:left;
         cursor:pointer;	
         font-size:12px;
         border-radius:3px;
      }  
      
      .condition-Item-content .item.active{
         background-color:#FF5647;
         color:#fff;
      
      }
      
      .condition-Item-content .item:hover{
          background-color:#FF5647;          
          color:#fff;
          
      }
      
      .condition-Item-content .item + .item{
         margin-left:5px;
      }
      
      .search-list > li{
        float:left;
        padding:5px;
      }
      .condition-search-lable{
         padding:5px 0;
      }
      
      
      
      /* 下方列表 */
      
      .projects>.row{
      
      }
      
       .project-item > div{
          height:200px;
          border:1px solid #efefef;
          border-radius:3px;
          /* box-shadow:0 0 3px 0 #ccc;	 */
          margin-top:20px;   
          background-color:#fff;
          color:#666;   
          padding:10px;    
       }
       
       .project-item  .condition{
          height:25px;
          line-height:25px;
          font-size:12px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow:elipses;
       }
       
       .pro-name{
          font-size:14px;
          height:30px;
          line-height:30px;
       }
       
       .pro-name > i{
          float:left;
          padding-right:10px;
          color:#FF5647;
          height:27px;
          line-height:27px;          
       }
       .pro-name > button{
          float:right;
          margin-top:4px;
          font-size:12px;
          border-radius:0;
       }
       

       
  @media(max-width: 480px){
      .top-title{         
		font-size:12px;
      }
    .top-reback{
       font-size:12px;
    }
    
    .body-box{
         padding:0 5px;
    }
    
  }
  
  @media(min-width: 580px){
    
	  .body-box{
	      padding:0 50px;
	  }
    
  }  
  
  @media(max-width: 580px){
    
	  .body-box{
	      padding:0 20px;
	  }
    
  }    
  


      
  </style>
</head>
<body>
   <div class="top-title">
                  蚌埠医学院第一附属医院志愿者招募
       <!-- <div class="back-home"><a href="#" class="back-home-btn">回到首页</a></div> -->
	      <span class="top-reback" style="float:right;">
	                       返回
	         <i class="glyphicon glyphicon-share-alt"></i>
	      </span>       
   </div>

   <div class="body-box">
  <div >
       <div class="top-condition">    
           <div class="condition-Item">
               <div class="condition-Item-lable">项目类别:</div>
               <div class="condition-Item-content">
                  <ul class="item-list clearfix">
                     <li class="item active health-category" data-value="">不限</li>
                     <li class="item health-category"  data-value="1">健康受试项目</li>
                     <li class="item health-category"  data-value="2">患者受试项目</li>
                  </ul>
               </div>
           </div>       
       
           <div class="condition-Item">
               <div class="condition-Item-lable">年龄要求:</div>
               <div class="condition-Item-content">
                  <ul class="item-list clearfix">
                  <li class="item active age-range" data-value="">不限</li>
                     <li class="item age-range" data-value="10-20">10-20</li>
                     <li class="item age-range" data-value="20-30">20-30</li>
                     <li class="item age-range" data-value="30-40">30-40</li>
                     <li class="item age-range" data-value="40-50">40-50</li>
                  </ul>
               </div>
           </div>
           
           <div class="condition-Item">
               <div class="condition-Item-lable">婚姻状态:</div>
               <div class="condition-Item-content">
                  <ul class="item-list clearfix">
                  <li class="item active marriage-status" data-value="">不限</li>
                     <li class="item marriage-status"  data-value="2">单身</li>
                     <li class="item marriage-status"  data-value="1">已婚</li>
                  </ul>
               </div>
           </div>   
           

           
           <div class="condition-Item">
               <div class="condition-Item-lable">时间范围:</div>
               <div class="condition-Item-content">
                  <ul class="item-list clearfix">
                  <li class="item active time-range" data-value="">不限</li>
                     <li class="item time-range" data-value="1">一月内</li>
                     <li class="item time-range" data-value="2">二月内</li>
                     <li class="item time-range" data-value="3">三月内</li>
                     <li class="item time-range" data-value="13">一年内</li>
                  </ul>
               </div>
           </div>   
           
           <div class="condition-Item">
               <div class="condition-Item-lable" style="line-height:35px;">自定义:</div>
               <div class="condition-Item-content">
                  <ul class="search-list clearfix">
                     <li class="" style="position:relative;">
	           			<input type="text" class="search-input"  style="height:32px;width:100%;border:1px solid #ddd;padding-right:20px;padding-left:3px;">
	           			<i class="fa fa-search" style="position:absolute;right:23px;top:14px;font-size:14px;"></i>                     
                     </li>
                     <li>
                          <button type="button" id="search-btn" class="btn btn-success" style="padding:5px 10px;">搜索</button>
                     </li>
                  </ul>
               </div>
           </div>                                      

       </div>
       
       
       <div class="content-list projects">
          <div class="row clearfix" id="item-list">
<!--              <div class="col-xs-12 col-sm-6 col-md-3 project-item">
                <div>                             
	                 <div class="pro-name">                 
		                 <i class="glyphicon glyphicon-star"></i>
		                                            测试项目1	 
		                 <button type="button"  class="btn btn-success" style="padding:2px 10px;">查看申请</button>                                 
	                 </div>
	                 <div class="pro-catag condition">项目类别：健康受试项目</div>
	                 <div class="pro-start-time condition">发布时间：2017-05-03</div>
	                 <div class="pro-end-time condition">截止时间：2017-05-03</div>
	                 <div class="pro-state condition">发布状态：有效</div>
	                 <div class="pro-age condition">年龄:23</div>
	                 <div class="pro-marry condition">婚姻状态：健康受试项目</div>                
                </div>
             </div> -->
<!--              <div class="col-xs-12 col-sm-6 col-md-3 project-item">
                <div>                             
	                 <div class="pro-name">                 
		                 <i class="glyphicon glyphicon-star"></i>
		                 <span style="float:left">测试项目1</span>	 
		                 <button type="button"  class="btn btn-success" style="padding:2px 10px;">查看申请</button>                                 
	                 </div>
	                 <div class="pro-catag condition">项目类别：健康受试项目</div>
	                 <div class="pro-start-time condition">发布时间：2017-05-03</div>
	                 <div class="pro-end-time condition">截止时间：2017-05-03</div>
	                 <div class="pro-state condition">发布状态：有效</div>
	                 <div class="pro-age condition">年龄:23</div>
	                 <div class="pro-marry condition">婚姻状态：健康受试项目</div>                
                </div>
             </div> -->
<!--              <div class="col-xs-12 col-sm-6 col-md-3 project-item">
                <div>                             
	                 <div class="pro-name">                 
		                 <i class="glyphicon glyphicon-star"></i>
		                                            测试项目1	 
		                 <button type="button"  class="btn btn-success" style="padding:2px 10px;">查看申请</button>                                 
	                 </div>
	                 <div class="pro-catag condition">项目类别：健康受试项目</div>
	                 <div class="pro-start-time condition">发布时间：2017-05-03</div>
	                 <div class="pro-end-time condition">截止时间：2017-05-03</div>
	                 <div class="pro-state condition">发布状态：有效</div>
	                 <div class="pro-age condition">年龄:23</div>
	                 <div class="pro-marry condition">婚姻状态：健康受试项目</div>                
                </div>
             </div>   -->                                                                                                                            
          </div>
       </div>
       
       
       
   </div>   
   </div>

 
   
   <div class="page" style="text-align:center;">
        <ul id="demo2" class="pagination" ></ul>
   </div>

  <script src="${pageContext.request.contextPath}/assets/js/jquery-1.11.2.min.js" charset="utf-8" type="text/javascript"></script>
  <script src="${pageContext.request.contextPath}/assets/plugins/bootstrap/js/bootstrap.min.js"></script> 
  <script src="${pageContext.request.contextPath}/assets/plugins/jqPaginator.js"></script>   
  
  <script type="text/javascript">
     var page={
           currentPage: 1,
           pageSize:12,
   		   init:function(){   			   
   			   this.initEvents().getListByPage(0,this.pageSize);
   		   },
   		   getListByPage:function(page, rows){
               var that = this;

               var params={};
               params.STARTROW = page*rows;
               params.PAGESIZE = that.pageSize;
               //健康受试者项目，患者受试者招募
               params.healthCategory = $(".health-category.active").attr("data-value");
               //年龄范围
               params.ageRangeStart = $(".age-range.active").attr("data-value").split('-')[0];
               params.ageRangeEnd = $(".age-range.active").attr("data-value").split('-')[1];
               //MarriageStatus婚姻状态：单身已婚
               params.marriageStatus = $(".marriage-status.active").attr("data-value");
               //time-range时间范围:按天计算
               params.timeRange = $(".time-range.active").attr("data-value");
               
               
               
               var searchValue = "";
               if ($(".search-content").val() != "请输入查询条件") {
                   searchValue = $(".search-input").val();
                   params.searchValue=searchValue;
               } 

               $.post("${pageContext.request.contextPath}/Portal/portal/GILP01.do?rnd=" + Math.random(),params, function (result) {                   
                   try {
                       that.initPagenator(result.totalCount, that.currentPage);
                       that.bindItemList(result.data);
                   } catch (e) {
                       that.initPagenator(1, 0);
                   }
               })
               return that;
   		   },
	   		bindItemList:function(data){
	   			var that = this;
	             var html ="";
	             
	             for(var i=0;i<data.length;i++){
		             html +='<div class="col-xs-12 col-sm-6 col-md-3 project-item col" data-code="'+data[i].CODE+'"">';
		             html +='<div>';
		             html +='<div class="pro-name">';
		             html +='<i class="glyphicon glyphicon-star"></i>';
		             html +='<span style="float:left;width:50%;overflow:hidden;height:30px;cursor:pointer;" >'+data[i].NAME+'</span>';
		             html +='<button type="button"  class="btn btn-success btn-item-apply" style="padding:2px 10px;"  data-code="'+data[i].CODE+'"">查看申请</button>';
		             html +='</div>';
		             html +='<div class="pro-catag condition">项目类别：'+data[i].CATEGLORY_NAME+'</div>';
		             html +='<div class="pro-start-time condition">发布时间：'+data[i].START_DATE+'</div>';
		             html +='<div class="pro-end-time condition">适应疾病：'+data[i].DISEASE+'</div>';		             
		             html +='<div class="pro-age condition">年龄:'+data[i].AGE_START+'-'+data[i].AGE_END+'</div>';
		             if(data[i].MARRIAGE==1){
		            	 html +='<div class="pro-marry condition">婚姻状态：已婚</div>';	 
		             }else{
		            	 html +='<div class="pro-marry condition">婚姻状态：单身</div>';
		             }
		             
		             if(data[i].STATUS=='3'){
		            	 html +='<div class="pro-state condition">发布状态：<span style="color:red;">正在招募</span></div>';	 
		             }else{
		            	 html +='<div class="pro-state condition">发布状态：<span style="color:#B9B9B9;">招募已满</span></div>';
		             }		             
		             html +='</div>';
		             html +='</div>';		             
	             }	     
	             $("#item-list").html(html);
	   			return that;
	   		},
   		   initEvents:function(){
   			   var that = this;
  			 $(".top-reback").on("click",function(){
				 window.history.go(-1);
			 })
   			   
   			   $(".back-home-btn").on("click",function(){
   				window.location.href="${pageContext.request.contextPath}/Portal/portalIndex.do?rnd="+Math.random();
   			   })
   			   
/* 	   		    $("#item-list").on("click",".project-item",function(){
	   		    	window.location.href="${pageContext.request.contextPath}/Portal/volunteeApply.do?code="+$(this).attr("data-code")+"&rnd="+Math.random();
	   			}) */
	   			$("#item-list").on("click",".btn-item-apply",function(){
	   		    	window.location.href="${pageContext.request.contextPath}/Portal/volunteeApply.do?code="+$(this).attr("data-code")+"&rnd="+Math.random();
	   			})
	   			
   			   
   			   $("#search-btn").on("click",function(){
   					that.getListByPage(0,that.pageSize);
   			   })
   			   
   			   //初始化事件
   			   $(".condition-Item").on("click",".item",function(){   				      				     				   
   				   $(this).addClass("active").siblings().removeClass("active");
   				   that.getListByPage(0,that.pageSize)
   			   })
   			   
   			   
   			   return that;
   		   },
   		   initPagenator:function(totalPages, currentPage){   			   
   			   var that = this; 
   			   
               //分页组件第一次加载为true，后面false  
               var if_firstime = true;
               var page;
               //每次重新加载分页插件都显示到第一页
               that.currentPage = 1;
               if (totalPages % that.pageSize == 0) {
                   page = totalPages / that.pageSize
               } else {
                   page = parseInt(totalPages / that.pageSize) + 1;
               }
               $(".page").css("display","block");
   			   
   			   
               $("#demo2").jqPaginator({
                   totalPages: page,
                   visiblePages: 5,
                   currentPage: currentPage,
                   first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
                   prev: '<li class="prev"><a href="javascript:void(0);"><i class="arrow arrow2"><\/i>上一页<\/a><\/li>',
                   next: '<li class="next"><a href="javascript:void(0);">下一页<i class="arrow arrow3"><\/i><\/a><\/li>',
                   last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
                   page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
                   onPageChange: function (n) {
                       //$("#demo2-text").html("当前第" + n + "页");
                       that.currentPage = n;
                       if (if_firstime) {
                           if_firstime = false;
                       } else if (!if_firstime) {
                           that.getListByPage((n-1), that.pageSize);
                       } 
                   }
               });
               
               return that;
   		   },
	   	   formatDate:function (now) { 
	   			var year=now.getYear(); 
	   			var month=now.getMonth()+1; 
	   			var date=now.getDate(); 
	   			var hour=now.getHours(); 
	   			var minute=now.getMinutes(); 
	   			var second=now.getSeconds(); 
	   			return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
	   	   }
     }
     
     
     $(function(){
    	 page.init();
    	 
     })
  </script>
  
  
   
</body>
</html>